import { Resizable } from 'react-resizable';
import React, { useEffect, useState } from 'react';
import { Table, Input, Button } from 'antd';
import axios from '../axios'
import { request } from 'umi';
import { ProFormSelect } from '@ant-design/pro-components';
import './plans.less';
export default () => {
  const [evection, setEvection] = useState([]); //  总数据渲染
  const [acolumns, setAcolumns] = useState([
    {
      title: '序号',
      key: '_id',
      width: 40,
      render: (text, record, index) => <>{index + 1}</>,
      ellipsis: true,
    },
    {
      title: '半年计划编号',
      key: 'anu',
      width: 120,
      dataIndex: 'anu',
      ellipsis: true,
    },
    {
      title: '半年计划主题',
      key: 'anutitle',
      width: 120,
      dataIndex: 'anutitle',
      ellipsis: true,
    },
    {
      title: '计划类型',
      dataIndex: 'anutype',
      key: 'anutype',
      ellipsis: true,
      width: 100,
      render: (_, row) => {
        if (row.anutype === 0) {
          return <span>个人计划</span>
        } else if (row.anutype === 1) {
          return <span>团队计划</span>
        } else if (row.anutype === 2) {
          return <span>部门计划</span>
        } else if (row.anutype === 3) {
          return <span>公司计划</span>
        }
      }
    },
    {
      title: '计划状态',
      dataIndex: 'anustate',
      key: 'anustate',
      ellipsis: true,
      width: 100,
      render: (_, row) => {
        if (row.anustate === 0) {
          return <span>未开始</span>
        } else if (row.anustate === 1) {
          return <span>进行中</span>
        } else {
          return <span>已完成</span>
        }
      }
    },
    {
      title: '编制人员',
      dataIndex: 'bianzhiren',
      key: 'bianzhiren',
      ellipsis: true,
      width: 100,
    },
    {
      title: '负责人',
      dataIndex: 'fuzeren',
      key: 'fuzeren',
      ellipsis: true,
      width: 100,
    },
    {
      title: '参与人',
      dataIndex: 'canyuren',
      key: 'canyuren',
      ellipsis: true,
      width: 100,
    },
    {
      title: '开始日期',
      dataIndex: 'starttime',
      key: 'starttime',
      ellipsis: true,
      width: 100,
    },
    {
      title: '结束日期',
      dataIndex: 'endtime',
      key: 'endtime',
      ellipsis: true,
      width: 100,
    },
    {
      title: '将计划共享给谁',
      dataIndex: 'fenxiang',
      key: 'fenxiang',
      ellipsis: true,
      width: 100,
    },
  ]);
  const [components, setComponents] = useState({});
  // 拖拽
  const ResizeableTitle = (props) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }
    return (
      <Resizable width={width} height={38} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index) =>
      (e, { size }) => {
        const nextColumns = [...columns];
        nextColumns[index] = {
          ...nextColumns[index],
          width: size.width,
        };
        setAcolumns(nextColumns);
      };
  const columns = acolumns.map((col, index) => ({
    ...col,
    onHeaderCell: () => ({
      width: col.width || 100,
      onResize: handleResize(index),
    }),
  }));
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  // 搜索
  let [tle, setTle] = useState('');
  let [sta, setSta] = useState('');
  let [type, setType] = useState('');
  // 搜索事件
  const search = () => {
    getdata(tle, type, sta)
  }
  // 重置
  const reset = () => {
    getdata()
    setTle('')
    setSta('')
    setType('')
  }
  // 获取数据
  const getdata = async (t, ty, sta) => {
    let res;
    if (t) {
      res = await axios.get('/mry/getplans?anutitle=' + t)
    } else if (ty) {
      res = await axios.get('/mry/getplans?anutype=' + ty)
    } else if (sta) {
      res = await axios.get(`/mry/getplans?anustate=${sta}`)
    } else if (t && ty) {
      res = await axios.get(`/mry/getplans?anutitle=${t}&anutype=${ty}`)
    } else if (t && sta) {
      res = await axios.get(`/mry/getplans?anutitle=${t}&anustate=${sta}`)
    } else if (ty && sta) {
      res = await axios.get(`/mry/getplans?anutype=${ty}&anustate=${sta}`)
    } else if (t && ty && sta) {
      res = await axios.get(`/mry/getplans?anutitle=${t}&anutype=${ty}&anustate=${sta}`)
    } else {
      res = await axios.get('/mry/getplans')
    }
    let arr = res.data.data.filter(i => {
      return i.plantype === 4
    })
    setEvection(arr);
  }
  useEffect(() => {
    getdata()
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  }, []);
  // 渲染
  return (
    <div className="applys">
      <div className="applysearch">
        <Button>新增</Button>
        <Button>还原</Button>
        <Button>打印</Button>
        <Button>导入</Button>
        <Button>导出</Button>
        <Button>查看日志</Button>
      </div>
      <div className="search">
        <div>
          <span>计划主题: </span>
          <input value={tle} onChange={(e) => { setTle(e.target.value); }} type="text" className='inp' />
        </div>
        <div>
          <span>计划类型: </span>
          <select value={type} onChange={(e) => {
            setType(e.target.value);
          }} name="type" id="" className='xuan'>
            <option value="">请选择</option>
            <option value="0">个人计划</option>
            <option value="1">团队计划</option>
            <option value="2">部门计划</option>
            <option value="3">公司计划</option>
          </select>
        </div>
        <div>
          <span>计划状态: </span>
          <select value={sta} onChange={(e) => { setSta(e.target.value); }} name="sta" id="" className='xuan'>
            <option value="">请选择</option>
            <option value="0">未开始</option>
            <option value="1">进行中</option>
            <option value="2">已完成</option>
          </select>
        </div>
        <div className="subbtn" onClick={() => { search() }}>查询</div>
        <div className="subbtn" onClick={() => { reset() }}>重置</div>
      </div>
      <div className="applyTable">
        <h1>工作半年计划</h1>
        <Table
          components={components}
          columns={columns}
          pagination={false}
          bordered
          rowKey="_id"
          scroll={{
            x: 1278,
            y: 400,
          }}
          rowSelection={rowSelection}
          onRow={(record, index) => {
            return {
              onClick: (e) => {
                let tr = e.target.parentNode;
                for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
                  tr.parentNode.childNodes[i].style.color = 'black';
                }
                tr.style.color = '#e17009';
              },
            };
          }}
          dataSource={evection}
        />
      </div>
      <div className="alpplybottom">
        <span className="iconfont icon-xiangzuoshuangjiantou"></span>
        <span className="iconfont icon-xiangzuojiantou"></span>
        <span className="iconfont icon-vertical_line"></span>
        第
        <Input value={1} />
        页，共1页
        <span className="iconfont icon-vertical_line"></span>
        <span className="iconfont icon-xiangyoujiantou"></span>
        <span className="iconfont icon-xiangyoushuangjiantou"></span>
        <span className="iconfont icon-vertical_line"></span>
        每页记录数：
        <Input value={50} />
        <Button>确定</Button>
      </div>
    </div>
  );
};
